<template>
  <div class="top">
    <headIndex @getCat="valueChange"/>
    <div class="main_ny mt20 clearfix">
      <div class="list_l fl">
        <ul>
          <li
            v-for="(item, index) in menuList"
            :key="index"
            :class="[index == status ? 'on' : '']"
            @click="choice(index,item.categoryname,item.categoryid)"
          >
            {{ item.categoryname }}
          </li>
        </ul>
      </div>
      <div class="list_zj fr">
        <div class="bt">
          <span>当前位置</span>
          <span>></span>
          <span>专家团队</span>
        </div>
        <div class="zj" v-if="retotal > 0">
          <ul style="padding-top: 20px" class="clearfix">
            <li v-for="(item, index) in newsList" :key="index">
              <a :href="'/article?id=' + item.infoid" class="clearfix">
                <div class="img fl"><img :src="item.picurl" /></div>
                <div class="txt fr">
                  <p><span>姓名：</span>{{ item.infotitle }}</p>
                  <p>
                    <span>职称：</span
                    >{{ item.jianti }}
                  </p>
                  <p><span>科室：</span>{{ item.infotitle2 }}</p>
                </div>
              </a>
            </li>
          </ul>
        </div>
        <el-empty v-if="retotal <= 0" description="暂无数据"></el-empty>
        <div class="page" v-if="retotal > 0">
          <div style="display: flex">
            <el-pagination
              :small="true"
              :background="true"
              @current-change="handleSizeChange"
              :current-page="pageindex"
              :page-size="pagesize"
              layout="slot, prev, pager, next"
              :total="retotal"
              prev-text="上一页"
              next-text="下一页"
            >
              <button
                :disabled="pageindex == 1"
                @click="handleSizeChange(1)"
                class="btn-prev"
              >
                首页
              </button>
            </el-pagination>
            <el-pagination
              style="float: right"
              :small="true"
              :background="true"
              layout="slot"
              :total="retotal"
              :current-page="pageindex"
              :page-size="pagesize"
              prev-text="上一页"
              next-text="下一页"
              @current-change="handleSizeChange"
            >
              <button
                :disabled="pageindex == reCount"
                @click="handleSizeChange(reCount)"
                class="btn-prev"
              >
                尾页
              </button>
            </el-pagination>
            <el-pagination
              :small="true"
              :background="true"
              @current-change="handleSizeChange"
              :current-page="pageindex"
              :page-size="pagesize"
              layout="slot"
              :total="retotal"
              prev-text="上一页"
              next-text="下一页"
            >
              <span class="el-pagination__total" style="padding-right: 20px"
                >当前页 <span style="color: red">{{ pageindex }}</span> /
                {{ reCount }}
              </span>
            </el-pagination>
            <el-pagination
              :small="true"
              :background="true"
              @current-change="handleSizeChange"
              :current-page="pageindex"
              :page-size="pagesize"
              layout="total"
              :total="retotal"
              prev-text="上一页"
              next-text="下一页"
            >
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
    <footIndex />
  </div>
</template>
<style lang="scss">
.el-pager .number {
  border-bottom: none;
}
.el-pager .more {
  border-bottom: none;
}
</style>
<script setup name="expert">
import headIndex from "./components/headIndex/index.vue";
import footIndex from "./components/footIndex/index.vue";
import { listpassInfo } from "@/api/yxzx/info";  
export default {
  components: {
    headIndex,
    footIndex,
  },
  data() {
    return {
      status: 0,
      retotal: 0,
      pageindex: 1,
      pagesize: 6,
      reCount: 0,
      newsList: [],
      menuList: [],
      listId: this.GetQueryString("id"),
    };
  },
  created() {
    this.getList();
  },
  methods: {
    choice(index,name,id) {
      this.status = index;
      this.listId = id
      if(name != '专家团队') {
        window.location.href =  '/list?id=' +id
      } else {
        this.getList();
      }
    },
    handleSizeChange(val) {
      this.pageindex = val;
      this.getList()
    },
    valueChange(val) {
      val.map((item) => {
        if (item.categoryname != '中心简介' && item.categoryname != '特色学科' && item.categoryname != '人才建设' && item.categoryname != '政治教育' && item.categoryname != '精彩专栏' && item.categoryname != '联系我们') {
          this.menuList.push(item)
        }
      })
      this.menuList.map((item,index) => {
        if (item.categoryid == this.GetQueryString('id')) {
          this.status = index
          this.wzTitle = item.categoryname
        }
      })
    },
    getList() {
      listpassInfo(
        this.listId,
        "",
        this.pageindex,
        this.pagesize
      ).then((response) => {
        this.newsList = response.InfoList;
        this.retotal = response.PageInfo.recordCount;
        this.reCount = response.PageInfo.recordCount;
      });
    },
    // 获取地址栏的参数
    GetQueryString(name) {
      var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
      var r = window.location.search.substr(1).match(reg);
      if (r != null) {
        return decodeURI(r[2]);
      } else {
        return null;
      }
    },
  },
};
</script>
